﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>loginx</title>
<link rel="stylesheet" href="/static/layui-v2.5.5/css/layui.css">
<link rel="stylesheet" href="/static/login_web/comon0.css">
<link rel="icon" href="/static/img/default.ico">
<script type="text/javascript" src="/static/layui-v2.5.5/layui.all.js"></script>
<style>
        
        /*.login-form {background-color:#fff;border:1px solid #fff;border-radius:3px;padding:14px 20px;box-shadow:0 0 8px #eeeeee;height: 100%}*/
/*        .logo-title {text-align:center;letter-spacing:2px;padding:0px 0;}
        .logo-title h1 {color:#009688;font-size:25px;font-weight:bold;}
        .login-form .layui-form-item {position:relative;font-size: 14px;}
        .login-form .layui-form-item label {position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color:#d2d2d2;}
        .login-form .layui-form-item input {padding-left:36px;}
        .captcha {width:60%;display:inline-block;}
        .captcha-img {display:inline-block;width:34%;float:right;}
        .captcha-img img {height:34px;border:1px solid #e6e6e6;height:36px;width:100%;}*/
        .login-form .layui-form-item input {background-color: rgba(255,255,255,.04)!important;border: 0;color:#BDCADA }
        input:-webkit-autofill {
          transition: background-color 5000s ease-in-out 0s;
        }
        input {
            -webkit-text-fill-color: #BDCADA;  
        }
</style>
</head>
	
	
<body>
<div class="loading">
  <div class="loadbox"> <i class="layui-icon layui-icon-loading"></i> 页面加载中... </div>
</div>
<!-- <div class="head">
  <h1>A-iot后台管理登录</h1>
  <div class="weather"><img src="picture/weather.png"><span>多云转小雨</span><span id="showTime"></span></div>
	</div> -->
<!-- 
	<script>
    var t = null;
    t = setTimeout(time,1000);//開始运行
    function time()
    {
       clearTimeout(t);//清除定时器
       dt = new Date();
  		var y=dt.getFullYear();
  		var mt=dt.getMonth()+1;
  		var day=dt.getDate();
       var h=dt.getHours();//获取时
       var m=dt.getMinutes();//获取分
       var s=dt.getSeconds();//获取秒
       document.getElementById("showTime").innerHTML = y+"年"+mt+"月"+day+"-"+h+"时"+m+"分"+s+"秒";
       t = setTimeout(time,1000); //设定定时器，循环运行     
    } 

</script>
	 -->
	

<div class="mainbox">
  <ul class="clearfix">
    <li id="style1" style="padding: 120px 220px">
      <div class="map">
        <div class="map1"><img src="/static/login_web/lbx.png"></div>
        <div class="map2"><img src="/static/login_web/jt.png"></div>
        <div class="map3"><img src="/static/login_web/map.png"></div>
        <!-- <div class="map4" id="map_1"></div> -->
      </div>
    </li>
    <li id="style2" style="padding: 160px 450px">
      <div class="boxall " style="">
        <div class="layui-form login-form" >
            <form class="layui-form" action="" >
              <div class="layui-form-item logo-title">
                <h1>管理后台登录</h1>
              </div>
                <div class="layui-form-item">
                  <input type="radio" name="login_kind" value="user" checked><font style="color: #BDCADA;position: relative;top: 3px;right: 14px">用户密码登录</font>
                  <input type="radio" name="login_kind" value="imei" ><font style="color: #BDCADA;position: relative;top: 3px;right: 14px">设备ID登录</font>
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-username" for="username"></label>
                    <input  type="text" id="una" name="username" lay-verify="required|account" placeholder="用户名或者邮箱" autocomplete="off" class="layui-input" value="admin">
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-password" for="password"></label>
                    <input  type="password" id="pwd" name="password" lay-verify="required|password" placeholder="密码" autocomplete="off" class="layui-input" value="">
                </div>
                <div class="layui-form-item">
                    <!-- <label class="layui-icon layui-icon-vercode" for="captcha" ></label> -->
                    <input  type="text" name="captcha" lay-verify="required|captcha" placeholder="验证码" autocomplete="off" class="layui-input verification captcha" >
                     <a id="captchaPic" class="layui-btn" style=""></i></a>
                    <!-- <div class="captcha-img" >
                       <div class="layui-form-mid layui-word-aux "  id="captchaPic" ></div>
                    </div> -->
                </div>
                <div class="layui-form-item" >
                    <input type="checkbox" name="rememberMe"  lay-skin="primary" ><font class="sty5" >记住密码</font>
                      <a onclick="taste()" class="layui-btn sty1" ><i class="layui-icon layui-icon-next sty2" style=""></i> 我要体验</a>
                </div>
                <div class="layui-form-item" >
                    <button  class="layui-btn layui-btn-fluid sty4" lay-submit="" lay-filter="login"><i class="layui-icon layui-icon-release sty2" ></i> 登 入</button>
                </div>
                <br>
                 <div class="layui-form-item">
                    <a href="pc_register" class="layui-btn sty3"><i class="layui-icon layui-icon-edit sty2" ></i> 注册账号</a> 
                    <a href="forgot_pwd" class="layui-btn sty1"><i class="layui-icon layui-icon-slider sty2" ></i> 忘记密码</a>
                 </div>

                <div class="layui-row sty6" >
                    <div  class="layui-col-md6">
                      <img class="sty7" src="/static/img/down_code.png" >
                      <p style="color: #BDCADA">安卓app扫描下载</p>
                    </div>
                    <div class="layui-col-md6">
                      <img class="sty7" src="/static/img/wx_xcx.png" >
                      <p style="color: #BDCADA">微信小程序扫描体验</p>
                    </div>
                  </div>
                <div class="" style="text-align: center;">
                  <div class="sty8" >
                      <p class="sty9" >网站内容解释权归本公司所有</p>
                      <a href="http://www.beian.miit.gov.cn/"><p  class="sty9" >备案号：粤ICP备18024101号</p></a>
                  </div>
                </div>
            </form>
      </div>
        <div class="boxfoot">
          
        </div>
        
    </li>
  </ul>
  
</div>
<!-- <div class="back"></div> -->
</div>

<!-- <form  class="layui-form layui-form-pane " action="" id="register_form" lay-filter="register_form" style="padding: 10px;display: none;">
  <div class="layui-form-item" style="color: white;font-size: 16px">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">手机号</label>
      <div class="layui-input-inline">
        <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" placeholder="请输入手机号码" class="layui-input">
      </div>
    </div>
  </div>
   <div class="layui-form-item" style="color: white;font-size: 16px">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">验证码</label>
      <div class="layui-input-inline">
        <input type="text" name="v_code" lay-verify="required"  placeholder="手机验证码"  autocomplete="off" class="layui-input">
      </div>
      <div class="layui-form-mid layui-word-aux">-</div>
        <a id="cold_time" class="layui-btn" onclick="get_v_code()"> 获取</a>
      </div>
  </div>
  <div class="layui-form-item" style="color: white;font-size: 16px">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">密码</label>
      <div class="layui-input-inline">
        <input type="password" name="password" lay-verify="required"  placeholder="请输入密码"  autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  <button id="submit_btn" lay-submit lay-filter="register_form" style="display: none;">提交</button>
</form> -->

<script type="text/javascript">



var form = layui.form;
var layer = layui.layer;
var $=layui.$
form.render()

// 登录过期的时候，跳出ifram框架
if (top.location != self.location) top.location = self.location;

var ht=$(window).height()/937
var wh=$(window).width()/1915
console.log(ht,wh)
// ht1=ht/7.81
// wh1=wh/8.7
// ht2=ht/5.86
// wh2=wh/4.31
$('#style1').attr('style','padding:'+ht*120+'px '+wh*220+'px')
$('#style2').attr('style','padding:'+ht*160+'px '+wh*450+'px')



$('.logo-title').attr('style','text-align:center;letter-spacing:'+ht*2+'px;padding:0px 0;')
$('h1').attr('style','color:#009688;font-size:'+ht*25+'px;font-weight:bold;')
$('.login-form .layui-form-item').attr('style','position:relative;font-size: '+ht*14+'px;')
$('.login-form .layui-form-item label').attr('style','position:absolute;left:1px;top:1px;width:'+wh*38+'px;line-height:'+ht*36+'px;text-align:center;color:#d2d2d2;')

$('.login-form .layui-form-item input').attr('style','padding-left:'+ht*36+'px;height:'+ht*36+'px')
$('.captcha').attr('style','width:'+wh*60+'%;display:inline-block;')
$('.captcha-img').attr('style','display:inline-block;width:'+wh*34+'%;float:right;')
$('.captcha-img img').attr('style','height:'+ht*34+'px;border:1px solid #e6e6e6;height:'+ht*36+'px;width:'+wh*100+'%;')

$('#captchaPic').attr('style','background-color: rgba(255,255,255,.04);border: 0;color: #BDCADA;position: absolute;right: 0px;width: '+wh*105+'px;height:'+ht*36+'px')


$('.sty1').attr('style','background-color: rgba(255,255,255,.04);border: 0;color: #BDCADA;position: absolute;top:-'+ht*3+'px;right: 0px;font-size: '+ht*15+'px;height:'+ht*36+'px')
$('.sty3').attr('style','background-color: rgba(255,255,255,.04);border: 0;color: #BDCADA;position: absolute;top:-'+ht*3+'px;left: 0px;font-size: '+ht*15+'px;height:'+ht*36+'px')
$('.sty2').attr('style','font-size: '+ht*15+'px; color: #1E9FFF;')
$('.sty4').attr('style','background-color: rgba(255,255,255,.04);border: 0;color:#BDCADA;font-size:'+ht*18+'px;font-weight:bold;height:'+ht*36+'px')
$('.sty5').attr('style','position: absolute;top:'+ht*8+'px;color: #BDCADA')
$('.sty6').attr('style','text-align: center;margin: '+ht*80+'px 0 0 0')
$('.sty7').attr('style','width: '+wh*80+'px;height: '+wh*80+'px;display: inline;')

$('.sty8').attr('style','margin: '+ht*60+'px 0 0 0')
$('.sty9').attr('style','font-size: '+ht*15+'px;color: #BDCADA')


var login_func=function(login_data){

  $.ajax({
    type: 'POST',
    data:login_data,
    url:"",
    async:true,
    dataType: 'json',
    success: function(data) {
      // location.reload();
      if (data == 'success') {
    if(login_data.rememberMe==='on'){
      layui.data('logindata',{key:'logindata',value:{'username':login_data.username,'password':login_data.password}})
    }
        window.location.href = '/index';
       }else{
        alert(data[0])
       }
    },
  });
}

var taste=function(){
  var taste_data={'username':'demo','password':'123456'};
  login_func(taste_data)
}


  $(".loading").fadeOut()
 var whei=$(window).width()
 var heig=$(window).height()
 $("html").css({fontSize:whei/20})
 $(window).resize(function(){
 var whei=$(window).width()
 $("html").css({fontSize:whei/20})
  });

 // console.log(whei,heig)
 // var login_width=whei/4.5
 // var login_heig=heig/1.5

 $('.boxall').attr('style','position: relative;padding: '+ht*30+'px  '+ht*30+'px  '+ht*30+'px  '+ht*30+'px;width: '+425*wh+'px;height: '+625*ht+'px')

var yz_code=Math.ceil(Math.random()*10000)
$('#captchaPic').text(yz_code)

if(layui.data('logindata').logindata!=null){
    var logindata=layui.data('logindata').logindata
    $('#una').val(logindata.username)
    $('#pwd').val(logindata.password)

  }
  
  // 进行登录操作
  form.on('submit(login)', function (form_data) {
      login_data = form_data.field;
      // console.log(login_data)
      if (login_data.username == '') {
          layer.msg('用户名不能为空');
          return false;
      }
      if (login_data.password == '') {
          layer.msg('密码不能为空');
          return false;
      }
      if (login_data.captcha == '') {
          layer.msg('验证码不能为空');
          return false;
      }else if($('#captchaPic').text()!==login_data.captcha){
          layer.msg('验证码不正确');
          return false;
      }

      // console.log(login_data)
      login_func(login_data)
      
      return false;
  });

// 标注是注册还是重置密码
// var handle_kind;
// var ajax_url;
// 注册和重置密码功能
// var phone_user=function(title){
//   handle_kind=title
//   title_cn={'register':'注册用户','forgot_pwd':'重置密码'}
//   form.render()
//   layer.open({
//     type: 1
//     ,title:title_cn[title]
//     ,area:['500px','300px']
//     ,offset:'60px'  
//     ,id: 'register_data' 
//     ,content:$('#register_form')
//     ,btn: ['提交','关闭']
//     ,shade: 0 //不显示遮罩
//     ,btn1: function(){
//       $('#submit_btn').click()
      
//     }
//     ,btn2: function(){
//       layer.closeAll();
//     }
//   }); 
// }
// 获取验证码，通过标注区别注册还是重置密码
// var get_v_code=function(){

//   var param_data=form.val('register_form')
//   if(param_data.phone==''){
//     alert('请输入手机号码')
//     return false
//   }else if(param_data.phone.length!==11){
//     alert('请输入正确格式的手机号码')
//     return false
//   }
  // console.log(param_data)

//   if(handle_kind=='register'){
//     ajax_url='pc_register/?key=validation'
//   }else if(handle_kind='forgot_pwd'){
//     ajax_url='forgot_pwd/?key=validation'
//   }
//   $.ajax({
//     type: 'POST',
//     data:param_data,
//     url:ajax_url,
//     async:true,
//     dataType: 'json',
//     success: function(data) {
//       // console.log(JSON.stringify(data))
//       if(data.code==1000){
//         alert(data.data)
//         var secs=60
//         $('#cold_time').attr('class','layui-btn layui-btn-disabled')
//         var cold_time=setInterval(function(){
//           $('#cold_time').text('获取（'+secs+'）')
//           if(secs==0){
//             clearInterval(cold_time);
//             $('#cold_time').text('获取')
//             $('#cold_time').attr('class','layui-btn')
//             return
//           }
//           secs=secs-1
//         },1000)
//       }else{
//         alert(data.error)
//       }
//     },
//   });
// }

// form.on('submit(register_form)',function(obj){
  // console.log(obj.field)
//   layer.closeAll()
//   var param_data=obj.field
//   if(handle_kind=='register'){
//     ajax_url='pc_register/?key=registered'
//   }else if(handle_kind='forgot_pwd'){
//     ajax_url='forgot_pwd/?key=reset_pwd'
//   }
//   $.ajax({
//     type: 'POST',
//     data:param_data,
//     url:ajax_url,
//     async:true,
//     dataType: 'json',
//     success: function(data) {
//       // console.log(JSON.stringify(data))
//       if(data.code==1000){
//         alert(data.data)
//       }else{
//         alert(data.error)
//       }
//     },
//   });
//   return false
// })
</script>
</body>
</html>
